import { ValidComponent } from 'solid-js';
import { Dynamic } from 'solid-js/web';

import { SVGIconKind } from '../types';

interface Props {
  class?: string;
  kind: SVGIconKind;
}

interface IconProps {
  class?: string;
}

const GitCodeCircle = (props: IconProps) => (
  <svg
    class={props.class}
    viewBox="0 0 1024 1024"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>GitCode icon</title>
    <path d="M660.48 212.352l19.2-10.837333 2.346667 11.946666c1.28 6.314667 2.389333 11.477333 2.858666 16.554667 4.096 44.330667 26.368 76.885333 57.898667 84.224 46.165333 10.709333 89.685333-6.997333 113.109333-46.08 28.16-46.848 15.914667-104.277333-32-138.837333C690.56 33.152 544.085333 6.656 386.304 52.949333c-340.181333 100.394667-456.533333 518.272-215.125333 774.570667 103.253333 109.653333 234.453333 156.928 383.317333 153.344 190.72-4.48 328.106667-99.541333 415.786667-264.277333 62.165333-116.864-5.418667-244.608-134.826667-271.146667a837.376 837.376 0 0 0-224.725333-14.378667 188.330667 188.330667 0 0 0-71.466667 21.76c-24.746667 12.8-31.872 39.466667-29.098667 65.92 2.56 24.064 21.034667 38.485333 43.008 42.112 44.245333 6.954667 89.045333 10.965333 133.76 14.634667 12.928 1.109333 26.026667 1.237333 39.04 1.365333 18.688 0.170667 37.376 0.341333 55.637334 3.413334 52.053333 8.533333 69.888 50.773333 43.136 96a186.88 186.88 0 0 1-22.826667 30.293333 259.413333 259.413333 0 0 1-131.413333 77.781333c-92.373333 22.613333-184.832 23.893333-276.778667-5.162666-104.746667-33.024-167.168-109.952-169.344-213.504a359.296 359.296 0 0 1 46.933333-182.229334c14.293333-25.898667 22.144-52.522667 19.925334-81.834666a1166.848 1166.848 0 0 1-2.005334-38.485334l-0.981333-22.4c10.624 2.218667 21.077333 5.034667 31.402667 8.405334 40.021333 16.085333 79.445333 23.466667 122.794666 11.648a222.122667 222.122667 0 0 1 75.349334-4.864 188.586667 188.586667 0 0 0 115.669333-28.245334c8.618667-5.034667 17.365333-9.941333 26.965333-15.36z" fill="#d81e06" />
  </svg>
);

const World = (props: IconProps) => (
  <svg
    class={props.class}
    stroke="currentColor"
    fill="currentColor"
    stroke-width="0"
    viewBox="0 0 512 512"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>World icon</title>
    <path
      fill="none"
      stroke-miterlimit="10"
      stroke-width="32"
      d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48z"
    />
    <path
      fill="none"
      stroke-miterlimit="10"
      stroke-width="32"
      d="M256 48c-58.07 0-112.67 93.13-112.67 208S197.93 464 256 464s112.67-93.13 112.67-208S314.07 48 256 48z"
    />
    <path
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="32"
      d="M117.33 117.33c38.24 27.15 86.38 43.34 138.67 43.34s100.43-16.19 138.67-43.34m0 277.34c-38.24-27.15-86.38-43.34-138.67-43.34s-100.43 16.19-138.67 43.34"
    />
    <path fill="none" stroke-miterlimit="10" stroke-width="32" d="M256 48v416m208-208H48" />
  </svg>
);

const icons: ValidComponent[] = [GitCodeCircle, World];

const SVGIcon = (props: Props) => <Dynamic component={icons[props.kind]} class={props.class} />;

export default SVGIcon;
